<template>
	<!-- 支付方式 -->
	<view class="container">
		<!-- 标题 -->
		<headTitle title="支付方式" :bottomline="true" :self="ret" @back='back'></headTitle>
		<view class="money bgfff flex-center-center">
			<view class="color333 fontb">
				<text class="font30">¥</text><text class="font56">{{money}}</text>
			</view>
		</view>
		<view class="selectop bgfff">
			<text class="title font24 color999">选择付款方式</text>
			<view class="item flex-center-between" @tap="select = 1">
				<view class="flex-center">
					<image src="/static/image/alipay.png" mode=""></image>
					<text class="font30 color333">支付宝</text>
				</view>
				<view class="select" :class="{'active': select === 1}">
					<image class="icon-active img-size-repeat" v-show="select === 1"></image>
				</view>
			</view>
			<view class="item flex-center-between" @tap="select = 2">
				<view class="flex-center">
					<image src="/static/image/wechatpay.png" mode=""></image>
					<text class="font30 color333">微信</text>
				</view>
				<view class="select" :class="{'active': select === 2}">
					<image class="icon-active img-size-repeat" v-show="select === 2"></image>
				</view>
			</view>
		</view>
		<button class="btn font34 colorfff" @tap="getData">确定</button>
	</view>
</template>

<script>
import Api from '@/common/api'
import headTitle from '@/components/head-title.vue'
export default {
	data() {
		return {
			ret: true, // 默认是自己跳转
			money: 0, // 获取上个页面的支付金额
			orderId: 0, // 订单id
			select: 1, // 1支付宝 2微信
		}
	},
	onLoad(opt) {
		if(opt.type === 'order') {
			this.ret = false
		}
		this.money = this.$api.prePage().money
		this.orderId = opt.orderId
	},
	methods: {
		// 返回跳转到订单页面
		back() {
			uni.reLaunch({ url: '/pages/order/order?status=1' })
		},
		// 获取订单需要支付金额
		async getData() {
			 let res = await Api.apiCall('post', Api.order.selectPayOrder, {
				 orderNo: this.orderId,
				 payType: this.select,
			 }, true)
			  if(res) {
				  this.$api.msg('支付成功')
			  }else {
				  this.$api.msg('支付失败')
			  }
		},
	},
	components: {
		headTitle
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5;
}

.money {
	width: 100%;
	height: 260rpx;
}

.selectop {
	margin-top: 10rpx;
	padding: 30rpx 0 0 30rpx;
	.title {
		line-height: 33rpx;
		margin-bottom: 10rpx;
	}
	.item {
		width: 100%;
		height: 110rpx;
		image {
			width: 64rpx;
			height: 64rpx;
			margin-right: 30rpx;
		}
		.select {
			position: relative;
			width: 42rpx;
			height: 42rpx;
			border-radius: 50%;
			border: 2rpx solid #DDD;
			margin-right: 30rpx;
			&.active {
				border: 0;
			}
			.icon-active {
				position: absolute;
				top: 0;
				left: 0;
				width: 42rpx;
				height: 42rpx;
				background-image: url('/static/image/cartselect.png');
			}
		}
		&:not(:last-child) {
			border-bottom: 1rpx solid #F5F5F5;
		}
	}
}

.btn {
	position: fixed;
	left: 50%;
	bottom: 100rpx;
	transform: translateX(-50%);
	width: 560rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	border-radius: 50rpx;
	background-color: #C84739;
}
</style>
